<template>
  <div class="app-container">
    <div class="container">
      <!--      标题-->
      <el-row>
        <el-col :span="24" :xs="24">
          <div class="title">现场设备<i class="el-icon-caret-right"></i>实时数据</div>
        </el-col>
      </el-row>
      <!-- 搜索 -->
      <el-row style="margin-left: 20px;">
        <el-col :span="22.5" :xs="24">
          <Search
              :search-data="searchData"
              :search-params="queryParams"
              @change="searchParamsUpdate"
          >
          </Search>
        </el-col>
        <el-col :span="1.5">
          <el-button
              style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
              size="mini"
              @click="refresh"
          >刷新</el-button>
        </el-col>
      </el-row>
      <!--    增加-->
      <el-row :gutter="10">
        <el-col :span="1">
          <right-toolbar :showSearch.sync="showSearch" :columns="columns"></right-toolbar>
        </el-col>
      </el-row>
      <!--      表格-->
      <el-table
          :data="tableData"
          height="66vh"
          style="width: 100%;background: #002127;"
          :cell-style="{backgroundColor: '#002127',color: '#ffffff',}"
          :header-cell-style="{ backgroundColor: '#00484D',textAlign: 'center',fontWeight: 'bold',color: '#ffffff',borderBottom: '1px solid #00484D' }">
        <el-table-column prop="siteName" label="站点名称" align="center" v-if="columns[0].visible"></el-table-column>
        <el-table-column prop="deviceName" label="设备名称" align="center" v-if="columns[1].visible"></el-table-column>
        <el-table-column prop="deviceNumber" label="设备编号" align="center" v-if="columns[2].visible"></el-table-column>
        <el-table-column prop="deviceType" label="设备类型" align="center" v-if="columns[3].visible"></el-table-column>
        <el-table-column prop="deviceInfo" label="设备信息" align="center" v-if="columns[4].visible"></el-table-column>
        <el-table-column prop="number3D" label="3D编号" align="center" v-if="columns[5].visible" show-overflow-tooltip sortable></el-table-column>
<!--        <el-table-column prop="deviceIndustryId" label="设备ID" align="center" v-if="columns[6].visible" ></el-table-column>-->
        <el-table-column label="通道" v-if="columns[6].visible" align="center">
          <template slot-scope="scope">
            <!-- 嵌套表格将在此处插入 -->
            <template v-for="(item, index) in scope.row.dataList">
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;">
                {{ item.channel ? item.channel : '-' }}
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302)">
                {{ item.channel ? item.channel : '-' }}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="值" v-if="columns[7].visible" align="center">
          <template slot-scope="scope">
            <template v-for="(item, index) in scope.row.dataList">
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;">
                {{ item.value ? item.value : '-' }}{{ item.unit}}
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302)">
                {{ item.value ? item.value : '-' }}{{ item.unit}}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="告警" v-if="columns[8].visible" align="center">
          <template slot-scope="scope">
            <!-- 嵌套表格将在此处插入 -->
            <template v-for="(item, index) in scope.row.dataList">
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;position: relative">
                <div :class="[item.alarmType == null ? 'status0' :'status1']" style="width: 10px;height: 10px;border-radius: 50%;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%)"></div>
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302);position: relative">
                <div :class="[item.alarmType == null ? 'status0' :'status1']" style="width: 10px;height: 10px;border-radius: 50%;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%)"></div>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="告警类型" v-if="columns[9].visible" align="center">
          <template slot-scope="scope">
            <!-- 嵌套表格将在此处插入 -->
            <template v-for="(item, index) in scope.row.dataList">
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;">
                {{ item.alarmType == 1 ? '上限' :item.alarmType == 2 ? '下限' : '-' }}
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302)">
                {{ item.alarmType == 1 ? '上限' :item.alarmType == 2 ? '下限' : '-' }}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="告警界限" v-if="columns[10].visible" align="center">
          <template slot-scope="scope">
            <!-- 嵌套表格将在此处插入 -->
            <template v-for="(item, index) in scope.row.dataList">
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;">
                {{ item.setUpValue ? item.setUpValue : '-' }}
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302)">
                {{ item.setUpValue ? item.setUpValue : '-' }}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="上报时间" v-if="columns[11].visible" align="center" width="200">
          <template slot-scope="scope">
            <!-- 嵌套表格将在此处插入 -->
            <template v-for="(item, index) in scope.row.dataList" >
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;">
                {{ item.time ? item.time : '-' }}
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302)">
                {{ item.time ? item.time : '-' }}
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <template v-for="(item, index) in scope.row.dataList">
              <div class="childItem" :key="index" v-if="(index+1) == scope.row.dataList.length" style="display: block;">
                <el-button
                    style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                    size="mini"
                    @click="handleEdit(scope.row, item)">历史数据</el-button>
<!--                (scope.$index, scope.row)-->
              </div>
              <div class="childItem" :key="index" v-else style="display: block; border-bottom: 1px solid rgba(0,231,231,0.302)">
                <el-button
                    style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
                    size="mini"
                    @click="handleEdit(scope.row, item)">历史数据</el-button>
              </div>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-row>
        <el-col :span="24" :xs="24">
          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.limit"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getSiteByPage, getActualIndustryPages } from '@/api/automation'
import Search from '@/components/PageSearch'
import Pagination from "@/components/Pagination";
import RightToolbar from '@/components/RightToolbar'
export default {
  name: "sceneactual",
  components: { Search, Pagination, RightToolbar },
  data() {
    return {
      // 搜索
      searchData: [
        {
          type: 'select',
          label: '站点',
          prop: 'siteId',
          options: [],
          placeholder: '请选择站点筛选'
        },
        {
          type: 'input',
          label: '设备名称',
          prop: 'deviceIndustryName',
          placeholder: '请输入设备名称筛选'
        },
        {
          type: 'input',
          label: '设备编号',
          prop: 'deviceNumber',
          placeholder: '请输入设备编号筛选'
        },
        {
          type: 'select',
          label: '设备类型',
          prop: 'deviceType',
          options: require('@/utils/data.json').secondDev,
          placeholder: '请选择设备类型筛选'
        }
      ],
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        siteId: '',
        deviceType: '',
        deviceIndustryName: '',
        deviceNumber: ''
      },
      // 表格
      tableData: [],
      // 显示搜索条件
      showSearch: true,
      // 列信息
      columns: [
        { key: 0, label: `站点名称`, visible: true },
        { key: 1, label: `设备名称`, visible: true },
        { key: 2, label: `设备编号`, visible: true },
        { key: 3, label: `设备类型`, visible: true },
        { key: 4, label: `设备信息`, visible: false },
        { key: 5, label: `3D编号`, visible: false },
        { key: 6, label: `通道`, visible: true },
        { key: 7, label: `值`, visible: true},
        { key: 8, label: `告警`, visible: true },
        { key: 9, label: `告警类型`, visible: true},
        { key: 10, label: `告警界限`, visible: true},
        { key: 11, label: `上报时间`, visible: true }
      ],
      // 站点下拉框
      siteOption:[],
      siteId:'',
      deviceName:''
    }
  },
  props: {},
  watch: {
    siteOption: {
      handler(val) {
        this.searchData[0].options = this.siteOption
      },
      immediate: true
    },
  },
  created() {
    this.siteId = this.$route.query.siteId
    this.deviceName = this.$route.query.deviceName
    if(this.siteId && this.deviceName){
      this.queryParams.siteId = this.siteId
      this.queryParams.deviceIndustryName = this.deviceName
    }
    this.getSiteOption()
    this.getList()
  },
  mounted() {
  },
  methods: {
    //站点下拉
    getSiteOption() {
      const data = {
        limit: 500,
        page: 1
      }
      getSiteByPage(data).then(res => {
        const data = res.data
        this.siteOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getList() {
      getActualIndustryPages(this.queryParams).then((res) => {
        console.log(res)
        this.total = res.dataCounts
        this.tableData = res.data || []
        res.data.map(item => {
          require('@/utils/data.json').secondDev.map(items => {
            if(item.deviceType == items.value){
              item.deviceType = items.label
            }
          })
        })
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 历史数据
    handleEdit(row, item) {
      console.log(row, item)
      this.$router.push({
        path: './scenehistory',
        query: {
          siteId: row.siteId,
          deviceId: row.deviceIndustryId,
          channelId: item.channelId
        }
      })
    },
    // 新的搜索内容
    searchParamsUpdate() {
      this.getList()
    },
    // 刷新
    refresh(){
      this.getList()
    }
  }
}
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #0C323A;
  .container {
    width: 100%;
    height: 100%;
    background: #002127;
    border-radius: 10px;
    .title {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #999999;
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 15px;
      padding-left: 20px;
      margin-top: 10px;
    }
    // 显隐列
    .el-col-1 {
      float: right;
    }
  }
}
// 表格设置鼠标经过时背景颜色
::v-deep.el-table tbody tr:hover>td{
  background-color: #02565c !important;
}
//表格改变每行底边框颜色
::v-deep.el-table  td, .el-table th.is-leaf  {
  border-bottom:  1px solid rgba(0,231,231,0.302)!important;
}
/*table边框颜色*/
.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #002127;
}
.el-table .el-table__cell {
  padding: 0 !important;
  height: 45px;

  .cell {
    padding-left: 0;
    padding-right: 0;
    text-align: center;

    .childItem {
      height: 35px;
      line-height: 35px;
      text-align: center;

    }
  }
}
.status0 {
  background:#978e8e;
}
.status1 {
  background:#FF1818;
}
</style>
